<!doctype html>
<html class="ifnojs"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>box-shadow:</title>
<style>
@import url(../../README.css);
html, body {
  color: white;
  background-color: black;
}
.view {
  padding: 40px; /* shadow padding */
}
.boxshadow1 {
  border: 1px solid silver;
  -uu-border-radius: 350px;
  -uu-box-shadow: silver 5px 5px 50px;
}
.mbg1 {
  -uu-background-image:
      url(../../img/c32.alpha.png), url(../../img/f32.alpha.png),
      url(../../img/i32.alpha.png), url(../../img/o32.alpha.png),
      url(../../img/s32.alpha.png),
      url(../../img/stage.png),
      url(../../img/solareclipse.jpg);
  -uu-background-repeat:
      no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
      no-repeat,
      repeat;
  -uu-background-position:
      30% 98%, 40% 98%, 50% 98%, 60% 98%, 70% 98%,
      center bottom,
      center center;
}
html.ifnojs .mbg1 {
  color: red;
  background: url(../../img/solareclipse.jpg) repeat center center;
}
</style>
<script>
window.UUMETA_DEBUG = 1;
</script>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<!--
<script src="../../../src/uuMeta.js"></script>
<script src="../../../src/uuResize.js"></script>
<script src="../../../src/uuStyle.js"></script>
<script src="../../../src/uuStyleSheet.js"></script>
<script src="../../../src/uuQuery.js"></script>
<script src="../../../src/uuColor.js"></script>
<script src="../../../src/uuCanvas.js"></script>
<script src="../../../src/uuLayer.js"></script>
<script src="../../../src/uuAltCSS.js"></script>
<script src="../../../src/uuAltCSS+.js"></script>
 -->
<script src="../../uuAltCSS.js"></script>


</head>
<body>
<input type="button" value="revalidate" onclick="uuAltCSS()" />

<hr />
<h2>Multiple Background Image DEMO</h2>




<div class="view">
  <div class="boxshadow1 mbg1"><pre>
.boxshadow1 {
  border: 1px solid silver;
  -uu-border-radius: 350px;
  -uu-box-shadow: silver 5px 5px 50px;
}
.mbg1 {
  -uu-background-image:
      url(../../img/c32.alpha.png), url(../../img/f32.alpha.png),
      url(../../img/i32.alpha.png), url(../../img/o32.alpha.png),
      url(../../img/s32.alpha.png),
      url(../../img/stage.png),
      url(../../img/solareclipse.jpg);
  -uu-background-repeat:
      no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
      no-repeat,
      repeat;
  -uu-background-position:
      30% 98%, 40% 98%, 50% 98%, 60% 98%, 70% 98%,
      center bottom,
      center center;
}
html.ifnojs .mbg1 {
  color: red;
  background: url(../../img/solareclipse.jpg) repeat center center;
}</pre></div></div>

<pre class="eg">

.boxshadow1 {
  border: 1px solid silver;
  -uu-border-radius: 350px;
  -uu-box-shadow: silver 5px 5px 50px;
}
.mbg1 {
  background-image:
      url(../../img/c32.alpha.png), url(../../img/f32.alpha.png),
      url(../../img/i32.alpha.png), url(../../img/o32.alpha.png),
      url(../../img/s32.alpha.png),
      url(../../img/stage.png),
      url(../../img/solareclipse.jpg);
  background-repeat:
      no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
      no-repeat,
      repeat;
  background-position:
      30% 98%, 40% 98%, 50% 98%, 60% 98%, 70% 98%,
      center bottom,
      center center;
}
html.ifnojs .mbg1 {
  /* JavaScript OFF の環境用 */
  color: red;
  background: url(../../img/solareclipse.jpg) repeat center center;
}</pre>


</body>
</html>